import CIMSymbol from '@arcgis/core/symbols/Symbol.js'
import Graphic from '@arcgis/core/Graphic.js'

// 背景箭头轨迹样式
const arrowsLineSymbol = new CIMSymbol({
  data: {
    type: 'CIMSymbolReference',
    minScale: 750000, // only allow the symbol to be shown at certain scales
    maxScale: 80000,
    symbol: {
      type: 'CIMLineSymbol',
      symbolLayers: [
        {
          // 路线白色箭头
          type: 'CIMVectorMarker',
          enable: true,
          size: 4,
          markerPlacement: {
            type: 'CIMMarkerPlacementAlongLineSameSize', // 在这条线上放置相同大小的标记
            endings: 'WithMarkers',
            placementTemplate: [19.5], // 箭头间距
            // angleToLine: true // 符号保持其与直线的角度
          },
          frame: {
            xmin: -5,
            ymin: -5,
            xmax: 5,
            ymax: 5
          },
          markerGraphics: [
            {
              type: 'CIMMarkerGraphic',
              geometry: {
                rings: [
                  // 箭头-自定义绘制路线上面的连续出现的图标
                  [
                    [-5, -5.47],
                    [1.96, -0.03],
                    [-6, 5.6],
                    [1.96, -0.03],
                    [-5, -5.47]
                  ]
                ]
              },
              symbol: {
                // 符号样式
                type: 'CIMPolygonSymbol',
                symbolLayers: [
                  {
                    type: 'CIMSolidStroke', // 闭合的
                    enable: true,
                    color: [255, 255, 255, 255],
                    width: 1
                  }
                ]
              }
            }
          ]
        },
        {
          // 路线浅绿色背景
          type: 'CIMSolidStroke',
          enable: true,
          capStyle: 'Butt',
          joinStyle: 'Round',
          width: 5,
          color: [48, 211, 102, 255]
        },
        {
          // 路线暗绿色边框
          type: 'CIMSolidStroke',
          enable: true,
          capStyle: 'Butt',
          joinStyle: 'Round',
          width: 8,
          color: [0, 115, 76, 255]
        }
      ]
    }
  }
})


// 113.20196879368324   21.97794021337795
/** 加载图标 */
const initIcon = (graphicsLayers, options) => {
  const point = {  
		type: "point",  
		x: options.lon,  
		y: options.lat,  
  }
  const symbol = {  
		type: "picture-marker",  
		url: options.url, //访问图片  
		width: "28px",  
		height: "28px",
		yoffset: "16px",
		outline: {  
			style: "solid"
		},  
  }
  const popupTemplate1 = {  
      title: options.name,  
      content: options.content  
  }
  const graphic = new Graphic({  
      geometry: point,  
      symbol: symbol,
      popupTemplate: popupTemplate1,
  })

  const offsetX = {
    4: 28,
    6: 37
  }

  /** 文字 */
  const textSymbol = {
    type: "text",  // autocasts as new TextSymbol()
    color: "white",
    haloColor: "black",
    haloSize: "1px",
    text: options.name,
    xoffset: offsetX[options.name.length],
    yoffset: 10,
    font: {  // autocasts as new Font()
      size: 10,
      weight: "bold"
    }
  }
  //创建文本图形
  const graphicText = new Graphic({
    geometry: point,  
    symbol: textSymbol,
  });

  graphicsLayers.add(graphic)
  graphicsLayers.add(graphicText)
}

const iconData = [
  {
    lon: 113.20196879368324,
    lat: 21.97794021337795,
    url: './assets/img/mapIcon/star2.png',
    name: '高栏海关',
    content: '高栏海关政府大楼',
  },
  {
    lon: 113.23133048041664,
    lat: 21.938236802421294,
    url: './assets/img/mapIcon/matou.png',
    name: '高栏码头',
    content: '高栏国际码头政府大楼',
  },
  {
    lon: 113.37520730953707,
    lat: 22.014269858525054,
    url: './assets/img/mapIcon/airport.png',
    name: '珠海金湾机场',
    content: '珠海金湾机场',
  },
  {
    lon: 113.21529710606426,
    lat: 21.965142538121707,
    url: './assets/img/mapIcon/station.png',
    name: '高栏港站',
    content: '高栏港站',
  },
]

/** 道路文字方向的标识点 */
const roadTextPoints = {
  '1': [[113.10070374912863, 22.012725352188866], [113.11538079685812, 22.01813625949946]],
  '2': [[113.43258692539594, 22.083417339711357], [113.45867945469278, 22.095505979981095]],
  '3': [[113.13956095493731, 22.10234501743735], [113.15123392857011, 22.04539487547679]]
}


/** 路线数据 */
const roadData = [
  [113.16143729959174, 22.0414414004004],
  [113.15445070043961, 22.038680700254247],
  [113.15135013983934, 22.038226876231988],
  [113.14546418004045, 22.03455211094615],
  [113.14174627221882, 22.031726501001685],
  [113.13698735020716, 22.029198323683033],
  [113.13225681844847, 22.0264692085413],
  [113.12434646361373, 22.02250608960412],
  [113.11438247065178, 22.017598451279582],
  [113.10025442092967, 22.01254209664222],
  [113.09757752729809, 22.011203649826427],
  [113.09118272584499, 22.009865203010634],
  [113.08493664070465, 22.007485742004803],
  [113.07779825768716, 22.00570114625043],
  [113.07125473992107, 22.00347040155748],
  [113.06545480371938, 22.00138837317735],
  [113.05861385332764, 22.000198642674434],
  [113.05207033556155, 21.998860195858697],
  [113.03972688159388, 21.999455061110154],
  [113.03452181064358, 22.000049926361612],
  [113.02976288863192, 22.00049607530019],
  [113.02530139924602, 22.00138837317735],
  [113.01140667947004, 22.00470105878958],
  [112.99753651573178, 22.008017837074874],
  [112.9821587255002, 22.011786903308177],
  [112.96572559672325, 22.015706732190665],
  [112.96075042929544, 22.016762070736092],
  [112.95471992332227, 22.015857494840134],
  [112.94597568966117, 22.01359605510015],
  [112.9414528101812, 22.012088428606774],
  [112.93165323797484, 22.011183852710815],
  [112.92954256088433, 22.011334615360113],
  [112.91793383688582, 22.010580802113623],
  [112.91160180561394, 22.010580802113623],
  [112.89343379993011, 22.01156939970815],
  [112.88532149958769, 22.01295379987795],
  [112.88007069990294, 22.01776440030693],
  [112.87998809987096, 22.018114400259492]
]

export {arrowsLineSymbol, roadData, initIcon, iconData, roadTextPoints };
